<template>
    <div class=''>
        <p><el-button type="text" @click="goHome" class="sy">首页</el-button>&emsp;/&emsp;商品管理&emsp;/&emsp;商品分类</p>
        <div class="list">
            <el-button type="primary" @click="add" class="add">添加分类</el-button>
            <tree-table
             :data="list"
             :columns='tabNav'
             index-text='#'
             show-index
             :selection-type='false'
             :expand-type='false'
            >
             <template
            slot='success'
            slot-scope="scope">
              <i class="el-icon-success" v-if="!scope.row.cat_deleted"></i>
              <i class="el-icon-error" v-else></i>
            </template>
            <template
            slot='sort'
            slot-scope="scope">
              <el-tag  v-if="scope.row.cat_level=='0'?true:false">一级</el-tag>
              <el-tag  type="success" v-if="scope.row.cat_level=='1'?true:false">二级</el-tag>
              <el-tag  type="warning" v-if="scope.row.cat_level=='2'?true:false">三级</el-tag>
            </template>
            <template
            slot='cao'
            slot-scope="scope">
                <el-button class="btn" type="primary" icon="el-icon-edit" @click="gai(scope.row.cat_id)">编辑</el-button>
                <el-button  class="btn" type="danger" icon="el-icon-delete" @click="del(scope.row.cat_id)">删除</el-button>
            </template>
            </tree-table>
            <!-- 分页 -->
            <el-pagination
                style="margin-top:20px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagenum"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <div class="modalBox" v-show="boxShow">
            <div class="box1">
                <div class="biao">
                    <h1>添加分类</h1>
                    <i class="el-icon-close" @click="boxShow=false"></i>
                </div>
                <el-form  style="margin-top:30px" :model="ruleForm" label-width="80px" status-icon  ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="分类名称" prop="name" >
                        <el-input type="type" v-model="ruleForm.cat_name" required></el-input>
                    </el-form-item>
                    <el-form-item label="父级分类"  >
                        <el-cascader
                        v-model="value"
                        class="can"
                        :options="can"
                        :props="defaultlist"
                        clearable></el-cascader>
                    </el-form-item>
                    <el-form-item style="float:right; margin-top:20px">
                        <el-button @click="boxShow=false">取消</el-button>
                        <el-button type="primary" @click="submitForm()">确认</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog
                title="编辑分类"
                :visible.sync="upShow"
                width="40%">
                <span>
                <el-form  style="margin-top:30px" :model="arr" label-width="80px" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="分类名称" prop="" >
                        <el-input type="type" v-model="arr.cat_name" ></el-input>
                    </el-form-item>
                </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="upShow=false">取 消</el-button>
                    <el-button type="primary" @click="upcate">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import {
  getCate,
  getCan,
  souidCate,
  tiCate,
  delCate,
  addCateList
} from "@/api/getData.js";

export default {
  data() {
    return {
      pagenum: 1,
      pagesize: 2,
      total: 0,
      list: [],
      boxShow: false,
      can: [],
      upShow: false,
      arr: {
        cat_name: ""
      },
      ruleForm: {
        cat_name: ""
      },
      tabNav: [
        {
          label: "分类名称",
          prop: "cat_name"
        },
        {
          label: "是否有效",
          type: "template",
          template: "success"
        },
        {
          label: "排序",
          type: "template",
          template: "sort"
        },
        {
          label: "操作",
          type: "template",
          template: "cao"
        }
      ],
      value: "",
      defaultlist: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        children: "children",
        checkStrictly: true
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getlist();
    this.getcan();
  },
  methods: {
    goHome() {
      this.$router.push("/greet");
    },
    getlist() {
      getCate({ pagenum: this.pagenum, pagesize: this.pagesize }).then(res => {
        this.total = res.data.total;
        this.list = res.data.result;
        console.log(999, res.data);
      });
    },
    getcan() {
      getCan().then(res => {
        this.can = res.data;
      });
    },
    add() {
      this.boxShow = true;
    },
    gai(id) {
      this.upShow = true;
      souidCate(id).then(res => {
        this.arr = res.data;
      });
    },
    // 删除分类
    del(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delCate(index).then(res => {
            console.log(res);
            this.getlist();
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    indexMethod(index) {
      var id = index;
      // console.log();
      this.list.forEach(item => {
        // console.log(item.cat_level);
        if (item.cat_level == 0) {
          id++;
        } else {
          id = "";
        }
      });
      return id;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getlist();
    },
    // 添加分类
    submitForm() {
      if (this.value.length > 2) {
      }
      if (this.value.length > 0) {
        this.ruleForm.cat_pid = this.value[this.value.length - 1];
        this.ruleForm.cat_level = this.value.length;
      } else {
        this.ruleForm.cat_level = 0;
        this.ruleForm.cat_pid = 0;
      }
      addCateList(this.ruleForm).then(res => {
        // console.log(res);
      });
      this.boxShow = false;
      this.ruleForm = {};
    },
    // 修改提交
    upcate() {
      tiCate({
        id: this.arr.cat_id,
        cat_name: this.arr.cat_name
      }).then(res => {
        console.log(res);
        this.getlist();
      });
      this.upShow = false;
    }
  },
  components: {}
};
</script>

<style  scoped>
.list {
  width: 95%;
  height: 460px;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}
.input-with-select {
  width: 400px;
}
.btn {
  padding: 8px 16px;
}
.el-icon-success {
  color: #90ee90;
}
.modalBox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box1 {
  padding: 20px;
  width: 600px;
  height: 250px;
  background: #fff;
}
.el-input,
.can {
  width: 490px;
  margin-left: 20px;
}
.biao {
  display: flex;
  justify-content: space-between;
}
h1 {
  font-size: 20px;
}
</style>
